<template>
  <div>
    <el-row class="commodityBox" v-for="(item,index) in commoditys" :key="index">
      <el-col :span="6" class="commodity">
        <img :src="item.src" alt="">
      </el-col>
      <el-col :span="12" class="commodity">
        <p class="commTitle">{{item.title}}</p>
        <p class="commNum">数量：{{item.num}}份</p>
        <p class="commTime">有效期至：{{item.time}}</p>
        <p class="commMoney">总价：￥{{item.money}}</p>
      </el-col>
      <el-col :span="6" class="commodity">
        <p class="use">{{item.status}}</p>
        <span class="useBtn">{{item.use}}</span>
      </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  data () {
    return {
      commoditys: [
        {
          src: './static/img/food1.jpg',
          title: '天伦餐厅',
          num: 2,
          time: '2016/12/12',
          money: 580,
          status: '待付款',
          use: '点击付款',
          star: '4.5'
        },
        {
          src: './static/img/food2.jpg',
          title: '霸王餐厅',
          num: 3,
          time: '2018/10/07',
          money: 300,
          status: '待付款',
          use: '点击付款',
          star: '4.6'
        },
        {
          src: './static/img/food3.jpg',
          title: '兰州拉面',
          num: 1,
          time: '2018/6/01',
          money: 14,
          status: '待付款',
          use: '点击付款',
          star: '4.7'
        }
      ]
    }
  }
}
</script>
<style lang="scss">
  .commodityBox{
    margin-top:20px;
    background:#fff;
    box-sizing: border-box;
    padding:0 20px;
    .commodity{
      height:200px;
      box-sizing: border-box;
      padding:20px 0;
      img{
        margin-top:5px;
        width: 150px;
        height:150px;
      }
      .commTitle{
        font-size:30px;
        font-weight: bold;
      }
      .commNum{
        font-size:23px ;
        color:#999;
      }
      .commTime{
        font-size:23px ;
        color:#999;
      }
      .commMoney{
        font-size: 28px;
        color:#ff621d;
      }
      .use{
        color:#ff621d;
        font-size: 23px;
        text-align: right;
      }
      .useBtn{
        color:#ff621d;
        display:inline-block;
        width: 107px;
        height:40px;
        font-size: 19px;
        float: right;
        margin-top:67px;
        border-radius: 6px;
        line-height: 40px;
        text-align: center;
        border:2px solid #ff621d;
      }
    }
  }
</style>
